import React, { useState, useEffect } from 'react';
import { Base } from '../base';
import { useStep } from 'use/step';
import { get_path } from 'base/ctl/base';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { GBall } from './in/gball';
import { TBall } from './in/tball';
import { SBack } from './sback/view';
import { Pick } from './out/pick';
import { Order } from './in/order';
import { Check } from './check/view';
import { Sbtn } from './ctl';
import { Print } from './print';

const ClientView = ({ umd, wsn }) => {
    const [cur, setCur] = useState();
    const [fin, setFin] = useState();

    useEffect(() => {
        setCur(null);
        setFin(null);
    }, []);

    if (fin === "out") {
        if (cur === "pick") {
            return <Pick cur={cur} hreturn={() => setFin(null)} umd={umd}/>;
        }
    } else if (fin === "print") {
            return <Print hreturn={() => setFin(null)}/>;
    } else if (fin === "in") {
        if (cur === "G") {
            return <GBall cur={cur} hreturn={() => setFin(null)} umd={umd}/>;
        }

        if (cur === "T") {
            return <TBall cur={cur} hreturn={() => setFin(null)} umd={umd}/>;
        }

        if (cur === "order") {
            return <Order cur={cur} hreturn={() => setFin(null)} umd={umd}/>;
        }

        if (cur === "sback") {
            return <SBack cur={cur} hreturn={() => setFin(null)} umd={umd}/>;
        }

        if (cur === "check") {
            return <Check cur={cur} hreturn={() => setFin(null)} umd={umd}/>;
        }
    }

    const hAction = (mt, tp) => {
        setCur(mt);
        setFin(tp);
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <Title label="仓库管理" width="w-56"/>
                <Time className="text-2xl"/>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-green-700 text-2xl text-white py-2 pl-4">物料出库</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="green" label="领料单出库" hcmd={() => hAction("pick", "out")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-blue-700 text-2xl text-white py-2 pl-4">物料入库</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="blue" label="钢球" hcmd={() => hAction("G", "in")}/>
                    <Sbtn cl="blue" label="陶瓷球" hcmd={() => hAction("T", "in")}/>
                    <Sbtn cl="green" label="入库单入库" hcmd={() => hAction("order", "in")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-teal-700 text-2xl text-white py-2 pl-4">退料 / 盘点</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="indigo" label="盘点" hcmd={() => hAction("check", "in")}/>
                    <Sbtn cl="green" label="扫码退料" hcmd={() => hAction("sback", "in")}/>
                    <Sbtn cl="blue" label="打印物料码" hcmd={() => hAction("print", "print")}/>
                </div>
            </div>
        </div>
    );
};

const StockClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);
    const umd = useStep(line, wsn);

    return (
        <Base wsn={wsn} line={line}>
            <ClientView umd={umd} wsn={wsn}/>
        </Base>
    );
};

export {StockClient};
